<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-tabs mb20">
    <li><a href="index.html">检测人脸</a></li>
    <li><a href="compareCode.html">相似度比较</a></li>
    <li class="active"><a href="centerFace.html">检测最中心人脸</a></li>
    <li><a href="addFeature.html">添加特征码</a></li>
    <li><a href="../client/index.html" target="_blank">切换版本</a></li>
    <li><a href="../index.html">返回首页</a></li>
  </ul>
  <div class="div-upload">
    <div class="div-btn">
      <button type="button" class="btn btn-default btn-blue">点击上传</button>
      <button type="button" class="btn btn-default btn-blue submit">点击检测</button>
    </div>
    <div class="tips">
      <p>调用的接口：/FaceApi/detectCenterFace</p>
      <p>请求方式：post</p>
      <p>接口参数：data: JSON.stringify({imgData: imgCommon})</p>
      <p>参数解析：参数名(imgData) : 参数内容(照片的base64字符串)，使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
    </div>
    <div class="tips informain none">
      <p>返回的数据：</p>
      <p>angle: <span class="angle"></span></p>
      <p>ei: <span class="ei"></span></p>
      <p>mouth: <span class="mouth"></span></p>
      <p>nose: <span class="nose"></span></p>
      <p>pos: <span class="pos"></span></p>
    </div>
    <input type="file" onchange="previewImage(this)" id="photoimg" class="btn-file" />
    <div class="preview" id="preview"><img src="" alt="" /></div>
  </div>
  <!-- 提示语 -->
  <div class="box">
    <div class="msg">提示成功</div>
  </div>
</div>
<script src="../style/js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/preview.js"></script>
<script>
  // 提交对比
  $('.submit').click(function () {
    var imgViewWid = $('.preview img').width();
    var imgViewHei = $('.preview img').height();
    $.ajax({
      type: "post",
      url: req_prefix + '/FaceApi/detectCenterFace',
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      contentType: "application/json",
      data: JSON.stringify({
        imgData: imgCommon
      }),
      success: function (data) {
        let result = data.result;
        if (result != "{}") {
          $('.informain').show();
          $('.angle').text(JSON.stringify(result.angle));
          $('.ei').text(JSON.stringify(result.ei))
          $('.mouth').text(JSON.stringify(result.mouth))
          $('.nose').text(JSON.stringify(result.nose))
          $('.pos').text(JSON.stringify(result.pos));

          var local = result.pos;
          // 比较展示的图片宽度/高度和实际的图片宽度/高度
          if (imgNatWid != imgViewWid && imgNatHei != imgViewHei) {
            var preceWid = imgViewWid / imgNatWid;
            var preceHei = imgViewHei / imgNatHei;
            var html = '<div class="drawDiv" style="left:' + local.left * preceWid + 'px;top:' + local.top * preceHei + 'px;width:' + local.width * preceWid + 'px;height:' + local.height * preceHei + 'px;"></div>'
          } else {
            var html = '<div class="drawDiv" style="left:' + local.left + 'px;top:' + local.top + 'px;width:' + local.width + 'px;height:' + local.height + 'px;"></div>'
          }
          $('.preview').append(html);
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text('检测成功');
        } else {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text('请提交人脸照片');
        }
      },
      error: function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseJSON.error);
      }
    })
  })
</script>
</body>
</html>